<template>
        <div class="box">
           <ul>
               <li
               v-for="(item,index) in love_list">
                   <LoveMattersContent
                      :class="{'global_love':$store.state.nowTime==='moon'}"
                      :love_list="item" :index="index">
                   </LoveMattersContent>
               </li>
           </ul>
        </div>
</template>

<script>
import LoveMattersContent from "@/components/love/LoveMattersContent.vue";
import api from "@/api";

export default {
    name: "LoveMatters",
    components: {LoveMattersContent},
    data(){
        return{
            love_list:"",
        }
    },
    mounted() {
          api.loveListGet().then((res)=>{
              this.love_list = res.data.data;
          })
    },
    methods:{

    }
}
</script>

<style scoped>
  .box{
      width: 800px;
      min-height: 300px;
      margin: auto;
  }
  .box ul{
      list-style: none;
      transition: all .3s ;
      animation: detail .5s ease-in-out 0s 1 forwards;
  }
 li {

     color: #8f8c8c;
     border-radius: 5px;
 }

  @media (min-width:0px) and (max-width: 900px) {
      .box {
          width: 360px;
      }
  }
</style>